<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="/public/static/H-ui/static/h-ui/css/H-ui.min.css"/>
    <link type="text/css" rel="stylesheet" href="/public/static/system/system.css">
    <title>学生列表</title>
    <style>
        body{ 
            padding: 50px;
        }
        .mrb{
            margin: 0px 20px 20px 0px;
        }
        .gray{ background:#f7f7f7;}
    </style>
</head>
<body>
    <div class="pt">
        <a href="javascript:history.back(-1);">&lt&lt返回班级管理</a>
    </div>
    <table class="table table-border table-hover">
        <a href="{:url('index/Classes/addstudent')}" class="btn btn-primary radius mrb">添加学生</a>
        <input type="button" value="停用" class="btn btn-default radius mrb setStatus" data-status = "0"/>
        <input type="button" value="启用" class="btn btn-default radius mrb setStatus" data-status = "1"/>
        <tr>
            <th scope="col" width="20" align="center">
                <input type="checkbox" class="chooseAll" id="chooseAll" />
            </th>
            <th scope="col" align="center">用户名称</th>
            <th scope="col" align="center">状态</th>
        </tr>
        {volist name='studentlist' id="studentlist" empty = "$hint"}
        <tr class="{$studentlist.student_status=='1'?'':'gray'}">
            <td align="center"><input type="checkbox"  class="chooseOne" value="{$studentlist.Id}"/></td>
            <td align="center">{$studentlist.userName}</td>
            <td align="center" class="statusTd">{$studentlist.student_status=="1"?'启用':'停用'}</td>
        </tr>
        {/volist}
    </table>
<script type="text/javascript" src="/public/static/H-ui/lib/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(document).ready(function(e) {
        chooseAllF();
    });

    //全选函数
    function chooseF(obj){ 
	    var num = $(obj).length;
	    for(var i = 0 ; i<num ; i++){
		    $(obj)[i].checked = true ;
	    }
    }
    //取消选择
    function unchooseF(obj){  
    	var num = $(obj).length;
    	for(var i = 0 ; i<num ; i++){
    		$(obj)[i].checked = false ;
    	}
    }
    function chooseAllF(){
        if($("#chooseAll").length<=0){ return null;}
        $("#chooseAll").click(function(){
	        var t = $(this)[0];
	        //alert(t.checked);
	        if(t.checked){
			    chooseF(".chooseOne");  
		    }else{
			    unchooseF(".chooseOne");  
		    }
        });
    }

    //ajax设置停用启用状态
    $(".setStatus").click(function(){
        let status = $(this).data("status");
        if($(".chooseOne:checked").length>0){
            let idStr = "";
            $(".chooseOne:checked").each(function(){
                idStr += $(this).val()+",";
            });
            // alert(idStr);
            $.post(
                "{:url('setStatus')}",//走到哪里去
                {
                    "status":status,
                    "ids":idStr
                },
                function(res){   //回调函数
                    // res = JSON.parse(res);
                    if(res.flag == "1"){
                    let statusTrClass = (status ==1)?'':'gray';
                    let statusTd = (status ==1)?'启用':'停用';
                    $(".chooseOne:checked").parent().parent().attr("class",statusTrClass);//
                    $(".chooseOne:checked").parent().parent().find(".statusTd").html(statusTd);
                    }else{
                        alert(res.msg);
                    }
                },"json"
            );
        }
    });
</script>
</body>
</html>